<template>
	<view class="content">

		<view class="top">
			<view class="top_diss">
				<view class="head_portrait">
					<view class="avatar" v-if="user.sex == 1">
						<image src="../../static/tiezai.png"></image>
					</view>
					<view class="avatar" v-if="user.sex == 0">
						<image src="../../static/ganghua.png"></image>
					</view>
					
				</view>
				<view class="top_middle">
					<view class="top_name">
						<text style="font-size: 38rpx; font-weight: bold;">{{user.real_name}}</text>，您好！
					</view>
					<view class="top_lessee gui-ellipsis">[{{user.sys_organization?user.sys_organization.com_path_name:user.orgName}}]</view>
				</view>
				<view class="top_lgid">{{user.company_num}}</view>
			</view>
			<!-- <view class="top_inform">
				<view class="top_inform_diss" @click="tongzhi">
					<view class="top_logo">
						<image src="../../static/pay/new/tongzhi.png" mode=""></image>
					</view>
					<view class="top_text" style="color: white;">关于开展2025年</view>
					<view class="top_you">
						<image src="../../static/pay/new/you.png" mode=""></image>
					</view>
				</view>
			</view> -->
		</view>

		<view class="classify gui-margin-top">
			<view class="classify_pay">缴费分类</view>
			<navigator class="classify_for" v-for="(item, idx) in menus" :url="item.url">
				<view class="classify_diss">
					<view class="classify_img">
						<image :src="item.img" mode=""></image>
					</view>
					<view class="classify_middle">
						<view class="classify_label">{{item.label}}</view>
					</view>
					<view class="classify_you">
						<image src="../../static/pay/new/chaxun.png" mode=""></image>
						<!-- <image src="../../static/pay/new/jiaofei.png" mode=""></image> -->
					</view>
				</view>
			</navigator>
		</view>

		<view class="base">
			<image @click="serve" src="../../static/pay/new/kefu.png" mode=""></image>
			<image @click="record" src="../../static/pay/new/jilu.png" mode=""></image>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				check_loading:true,  //订单检查中
				user: null,
				index_id: 0,
				menus: [{
						id: 1,
						label: '工会费',
						value: 'ghf',
						url: '/pages/pay/ghf',
						img: '../../static/pay/new/ghf.png'
					},
					{
						id: 2,
						label: '医疗互助金',
						img: '../../static/pay/new/hzj.png',
						value: 'hzj',
						url: '/pages/pay/hzj',
					},
					{
						id: 3,
						label: '团费',
						img: '../../static/pay/new/tf.png',
						value: 'tw',
						url: '/pages/pay/tw_new',
					},
					{
						id: 4,
						label: '其他',
						img: '../../static/pay/new/qt.png',
						value: 'qt',
						url: '',
					},
				],
			}
		},
		onLoad(opt) {
			this.user = uni.getStorageSync("userInfo");
			console.log("user",this.user);
			this.$boya.NGet("/app/pay/check_user_order_status")
		},
		methods: {
			tongzhi() {
				// this.$boya.msg('敬请期待');
			},
			serve() {
				//联系客服
				let appid = "gh_edf4ceb10043";
				let path = "pages/service/service"
				//打开小程序,非H5
				// #ifndef H5
				plus.share.getServices(function(s) {
					var shares = {};
					for (var i = 0; i < s.length; i++) {
						var t = s[i];
						console.log(t);
						shares[t.id] = t;
						console.log(t.id);
					}
					console.log("shares", shares);
					var sweixin = shares['weixin'];
					if (sweixin) {
						sweixin.launchMiniProgram({
							id: appid,
							path: path
						})
					} else {
						plus.nativeUI.alert('当前环境不支持微信操作!');
					}
					console.log("微信服务列表：" + JSON.stringify(sweixin));
				}, function(e) {
					console.log("获取分享服务列表失败：" + e.message);
				});
				//#endif
			},
			record() {
				//缴费记录
				uni.navigateTo({
					url: '/pages/pay/record'
				})
			}
		}
	}
</script>

<style scoped>
	.content {
		width: 100vw;
		height: 100vh;
		background: url('../../static/pay/new/bj1.png') 100% 100% / 100% 100%;
	}

	.top {
		width: 100vw;
		padding-bottom: 100rpx;
		/* background: url('../../static/pay/new/topDi1.png') 100% 100% / 100% 100%; */
	}

	.top_diss {
		width: 90%;
		margin: 0 auto;
		padding-top: 90rpx;
		display: flex;
		align-items: center;
		font-size: 28rpx;
	}

	.head_portrait {
		width: 130rpx;
		height: 130rpx;
	}

	.head_portrait>image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.top_middle {
		margin-left: 50rpx;
	}

	.top_lessee,
	.top_lgid {
		color: rgba(0, 0, 0, 0.6);
	}

	.top_lessee {
		width: 400rpx;
		margin-top: 35rpx;
	}

	.top_lgid {
		position: absolute;
		margin-top: 90rpx;
		right: 30rpx;
	}

	.top_inform {
		width: 92%;
		margin: 0 auto;
		margin-top: 80rpx;
		height: 65rpx;
		line-height: 65rpx;
		background-color: white;
		border-radius: 20rpx;
	}

	.top_inform_diss {
		display: flex;
		align-items: center;
		padding: 0 15rpx;
	}

	.top_logo {
		width: 88rpx;
		height: 50rpx;
	}

	.top_logo>image {
		width: 100%;
		height: 100%;
	}

	.top_text {
		font-size: 30rpx;
		margin-left: 20rpx;
	}

	.top_you {
		width: 45rpx;
		height: 45rpx;
		position: absolute;
		right: 35rpx;
	}

	.top_you>image {
		width: 100%;
		height: 100%;
	}

	.classify {
		width: 90%;
		margin: 0 auto;
	}

	.classify_pay {
		color: rgba(0, 0, 0, 0.6);
	}

	.classify_diss {
		display: flex;
		align-items: center;
		background-color: white;
		border-radius: 20rpx;
		padding: 20rpx;
		margin: 30rpx 0;
	}

	.classify_img {
		width: 85rpx;
		height: 85rpx;
		padding: 15rpx;
	}

	.classify_img>image {
		width: 100%;
		height: 100%;
		border-radius: 15rpx;
	}

	.classify_middle {
		font-size: 35rpx;
		margin-left: 25rpx;
		font-weight: bold;
	}

	.classify_you {
		position: absolute;
		right: 90rpx;
		display: flex;
		align-items: center;
	}

	.classify_you>image {
		width: 160rpx;
		height: 65rpx;
	}

	.base {
		width: 90%;
		margin: 0 auto;
		margin-top: 50rpx;
		display: flex;
		justify-content: space-between;
	}

	.base>image {
		width: 220rpx;
		height: 82rpx;
	}

	.popup {
		width: 100%;
		min-height: 65vh;
		background-color: white;
		border-radius: 20rpx;
	}

	.pay_icon {
		width: 30px;
		height: 30px;
	}

	.details {
		border-radius: 20rpx;
		margin: 0 30rpx;
	}

	.word {
		margin-bottom: 10rpx;
	}
	
	.avatar {
		
		width: 150rpx;
		height: 150rpx;
		overflow: hidden;
		border-radius: 50%;
		border: 2px solid white;
		box-sizing: border-box;
		background-color: white;
	}
	
	.avatar image {
		width: 100%;
		height: 100%;
		object-fit:cover;
	}
</style>